<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker renderCalendarCallback demo</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
		<style type="text/css" media="screen">
		table.jCalendar td.thursday {
			border: 1px solid #f00;
		}
		</style>
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('#dow').bind(
					'change',
					function()
					{
						Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value);
					}
				);
				var testCallback = function($td, thisDate, month, year)
				{
					if ($td.is('.current-month') && thisDate.getDay() == 4) {
						var d = thisDate.getDate();
						$td.bind(
							'click',
							function()
							{
								alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);
							}
						).addClass('thursday');
					} else if (thisDate.getDay() == 5) {
						$td.html('Friday the ' + $td.html() + 'th');
					}
				}
                $('#chooseDateForm').bind(
                    'submit',
                    function()
                    {
                        var month = this.month.options[this.month.selectedIndex].value;
                        var year = this.year.options[this.year.selectedIndex].value;
                        
                        $('#calendar-me').renderCalendar({month:month, year:year, renderCallback:testCallback});
                        
                        return false;
                    }
                );
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: renderCalendarCallback</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example demonstrates the use of $().renderCalendar as introduced by jquery.datePicker.js
                - we supply a <strong>renderCallback</strong> parameter so that we have control over how each day is
				rendered.
            </p>
			<p>
				In this particular case I add a class to all of the Thursday cells in the currently shown month and
				also add a click handler to them. I then update the text in all of the Friday cells.
			</p>
			<p>
				As you can imagine, you could easily use this callback to create a version of the calendar which
				behaved as an events listings or something (although you would need to remember to make it
				degrade gracefully for users without JavaScript turned on and for search engines).
			</p>
            <div id="calendar-me">
                The contents of this div will be replaced with a call to $('#calendar-me').renderCalendar().
            </div>
            <form name="chooseDateForm" id="chooseDateForm" action="#">
                <fieldset>
                    <legend>Choose a month to render</legend>
                    <ol>
                        <li>
                            <label for="dow">First day of week:</label>
                            <select name="dow" id="dow">
                                <option value="1">Monday</option>
                                <option value="2">Tuesday</option>
                                <option value="3">Wednesday</option>
                                <option value="4">Thursday</option>
                                <option value="5">Friday</option>
                                <option value="6">Saturday</option>
                                <option value="0">Sunday</option>
                            </select>
                        </li>
                        <li>
                            <label for="month">Month:</label>
                            <select name="month" id="month">
                                <option value="0">January</option>
                                <option value="1">Febuary</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                        </li>
                        <li>
                            <label for="year">Year:</label>
                            <select name="year" id="year">
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008" selected="selected">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                            </select>
                        </li>
                        <li>
                            <input type="submit" value="renderCalendar" />
                        </li>
                    </ol>
                </fieldset>
            </form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
$(function()
{
	$('#dow').bind(
		'change',
		function()
		{
			Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value);
		}
	);
	var testCallback = function($td, thisDate, month, year)
	{
		if ($td.is('.current-month') && thisDate.getDay() == 4) {
			var d = thisDate.getDate();
			$td.bind(
				'click',
				function()
				{
					alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);
				}
			).addClass('thursday');
		} else if (thisDate.getDay() == 5) {
			$td.html('Friday the ' + $td.html() + 'th');
		}
	}
	$('#chooseDateForm').bind(
		'submit',
		function()
		{
			var month = this.month.options[this.month.selectedIndex].value;
			var year = this.year.options[this.year.selectedIndex].value;
			
			$('#calendar-me').renderCalendar({month:month, year:year, renderCallback:testCallback});
			
			return false;
		}
	);
});</pre>
        </div>
	</body>
</html>